import React, { memo, Suspense, useEffect } from 'react'
import { useRoutes } from 'react-router-dom'

import routes from './router'

import { useAppDispatch, useAppSelector, shallowEqualApp } from './store'
import { changeMessageAction } from './store/modules/counter'

import AppHeader from './components/app-header'

const App = memo(() => {
  // 网络请求
  useEffect(() => {
    // getHomeData()
  })
  const { count, message } = useAppSelector(
    (state) => state.counter,
    shallowEqualApp
  )
  // 事件处理
  const dispatch = useAppDispatch()
  function handleChangeMsg() {
    console.log('message')
    dispatch(changeMessageAction('嘻嘻嘻嘻嘻嘻嘻嘻'))
  }
  return (
    <div className="app">
      <AppHeader />
      <Suspense fallback="loading...">
        <div className="main">{useRoutes(routes)}</div>
      </Suspense>
      <h2>
        当前计数:{count}-{message}
      </h2>
      <button onClick={handleChangeMsg}>change message</button>
    </div>
  )
})

export default App
